<template>
  <view class="user-header">
    <view class="user-info">
      <image
        class="avatar"
        :src="userInfo.avatar"
        mode="aspectFill"
        @click="mygo('/pages/minePages/accountInfo')"
      ></image>
      <text class="nickname">{{ userInfo.nickname }}</text>
      <text class="partition">{{ '-' }}</text>
      <text class="department">{{ userInfo.department }}</text>
    </view>
    <view
      class="notification-btn"
      @click="mygo('/pages/homePages/notification')"
    >
      <image
        src="/static/img/components/notice.png"
        class="notification-img"
        mode="aspectFill"
      ></image>
      <!-- 未读数量徽章 -->
      <view v-if="unreadCount > 0" class="notification-badge">
        <text class="badge-text">{{ getBadgeText() }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { mygo } from '@/utils/useNavigator';
import { createRequest } from '@/utils/request';

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({
      avatar: '',
      nickname: '',
      department: '',
    }),
  },
});

// 响应式数据
const unreadCount = ref(0);

// 获取未读通知数量
const fetchUnreadCount = async () => {
  try {
    const result = await createRequest('/notification/count');
    
    // 验证返回数据
    if (result) {
      unreadCount.value = result.data;
    }
  } catch (error) {
    console.error('获取未读通知数量失败:', error);
  }
};

// 获取徽章显示文本
const getBadgeText = () => {
  const count = unreadCount.value;
  if (count > 99) {
    return '99+';
  }
  return count.toString();
};

// 组件挂载时获取未读数量
onMounted(() => {
  fetchUnreadCount();
});
</script>

<style scoped lang="scss">
.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 64rpx 32rpx 0;
  @include header-background;
  @include header-fixed;
  // 不加毛玻璃，保证内容清晰
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}

.nickname {
  font-size: 32rpx;
  color: #fff;
  margin-left: 10rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 200rpx;
}

.department {
  font-size: 32rpx;
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 340rpx;
}

.partition {
  margin: 0 4rpx;
  font-size: 32rpx;
  color: #fff;
}

.notification-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
}

.notification-img {
  width: 40rpx;
  height: 40rpx;
}

.notification-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  min-width: 32rpx;
  height: 32rpx;
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
  box-sizing: border-box;
  box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.3);
  border: 2rpx solid #fff;
  z-index: 10;
}

.badge-text {
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
</style>
